<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>swiper加animate效果</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="web">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide page page1">
						<img src="img/pic.png " class="ani daren" swiper-animate-effect="daren" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s" />
					</div>
					<div class="swiper-slide page page2">
						<h1 class="ani" swiper-animate-effect="hinge" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">02</h1>
					</div>
					<div class="swiper-slide page page3">
						<h1 class="ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">03</h1>
					</div>
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/swiper-3.4.2.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script>
			var swiper = new Swiper('.swiper-container',{
				direction:'vertical',
				freeMode:true,
				freeModeMomentumBounce:false,
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
		</script>
	</body>
</html>
